import React, {Component} from 'react'

import OpenStyle from "../components/openStyle/openStyle"
import OpenLK28Style from "../components/openStyle/openLK28Style"

export default class BetCenterHistory extends Component {
  constructor (props){
   super(props)
   this.fpTimer = null;
   this.kjTimer = null;
  //  this.reloadTimer = null;
   this.state= {
    fpSecond:this.props.fpSecond ? this.props.fpSecond: 0,
    kjSecond:this.props.kjSecond ? this.props.kjSecond: 0,
    // reloadS:10
   }
}

startTimer() {

  const {kaijiang,fenpan} = this.props;
  let {fpSecond, kjSecond,reloadS} = this.state;
  // console.log(this.state.fpSecond,"fep",this.state.kjSecond);
  this.clearTimer();
  let _this = this;
  // if(fpSecond > 0 || kjSecond > 0  && reloadS==10){
  //   this.reloadTimer = setInterval(()=>{
  //     const {reloadS} = this.state;
  //     // console.log(reloadS,"timer1");
  //     if(isNaN(reloadS)){
  //       _this.setState({
  //         reloadS:10
  //       })
  //       this.props.loadCaiPiaoData()//载入中的时候 去校验时间参数 
  //     }else{
  //       _this.setState({
  //         reloadS:reloadS-1 || "载入中"
  //       })
  //     }
  //   },1000)
  // }
  if (fpSecond > 0) {
    this.fpTimer = setInterval(() => {
      const {fpSecond} = this.state;
      // console.log(fpSecond,"fep");
      if (fpSecond <= 0) {
        _this.finished = true;
        clearInterval(_this.fpTimer);
        fenpan();
        _this.fpTimer = null;
      } else {
        _this.setState({
          fpSecond: fpSecond - 1
        });
      }
    }, 1000);
  }

  if (kjSecond > 0) {
    this.kjTimer = setInterval(() => {
      const {kjSecond} = this.state;
      if (kjSecond <= 0) {
        clearInterval(_this.kjTimer);
        kaijiang();
        _this.kjTimer = null;
      } else {
        _this.setState({
          kjSecond: kjSecond - 1
        });
      }
    }, 1000);
  }
}
clearTimer() {
  // if(this.reloadTimer){
  //   clearInterval(this.reloadTimer);
  //   this.reloadTimer = null;
  // }
  if (this.fpTimer) {
    clearInterval(this.fpTimer);
    this.fpTimer = null;
  }
  if (this.kjTimer) {
    clearInterval(this.kjTimer);
    this.kjTimer = null;
  }
}
// reloadS(){
//  this.clearTimer()
//   this.setState({
//     reloadS:10
//   })
//   // console.log(this.props);
//   this.props.loadCaiPiaoData()
// }
formatSecond(second) {
    // console.log(second,"kaijianghsij");
    
  if (second < 0) return 0;

  let day = ~~(second / ( 24 * 60 * 60) );
  second = second - day * 24 * 60 * 60 ;
  let hour = ~~ (second / ( 60 * 60 ) );
  second = second - hour * 60 * 60;
  let min = ~~ (second / 60);
  second = second - min * 60;
  
  // 天
  if (day > 0) day = day + '天';
  else day = '';
  
  // 小时
  if (hour > 0) hour = hour + '小时';
  else hour = '';
  
  // 分钟
  if (min < 10 && min > 0 ) {
    min = '0' + min + ':';
  }
  else if (min <= 0) {
    min = '00' + ':';
  }
  else {
    min += ':';
  }
  
  // 秒
  if (second < 10) second = '0' + second;
  return day + hour + '' + min  + second;
}
componentDidMount(){
  console.log("runing");
  this.startTimer();
}
componentWillReceiveProps(nextProps) {
  //当用户切换彩种时 重新获取时间参数
  // 用户刷新 
  // 切换成已加载过的这个模块
  if(this.props.kjSecond !== nextProps.kjSecond  ||  this.props.fpSecond  !== nextProps.fpSecond){
    this.setState({
      fpSecond: nextProps.fpSecond ? nextProps.fpSecond: 0,
      kjSecond: nextProps.kjSecond ? nextProps.kjSecond: 0,
      // reloadS:10
    }, ()=>this.startTimer()) // 想要设置完state之后立即使用 只能回调
  }
}

componentWillUnmount() {
  this.clearTimer();
}
   render() {
     const {currentQs} = this.props
     const {fpSecond, kjSecond,reloadS} = this.state
    // console.log(fpSecond, kjSecond,reloadS);
   return <div>
          <div className="now-qishu"> <div className="qishu"><span>{currentQs}</span>期</div>
                <div className="distime">距离{fpSecond <= 0 ? '开奖': '封盘' }： 
                <span className="red">{ fpSecond <= 0 ? this.formatSecond(kjSecond): this.formatSecond(fpSecond) }</span> 
                 {/* <div className="updata"><div onClick={()=>{this.reloadS()}}></div> <span>{reloadS}</span></div> */}
                </div>
          </div>
          
   </div>
   }
}